<!--
  @Description: 大屏设计器-首页
  @author: Linh
  @date: 2023-01-05 14:47:52
-->
<template>
  <!-- <div>大屏设计器</div> -->
  <!-- <page-content /> -->
  <!-- <div ref="layout"> -->
  <component id="layout" :is="component" />
  <!-- </div> -->
</template>

<script setup lang="ts">
import PageContent from "@/components/page-content/index.vue";
import PageMap from "@/components/page-map/index.vue";
import PageEmety from "@/components/page-emety/index.vue";
import { ref, watch, unref, nextTick } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const component = ref();
const layout = ref();

const loadCompontent = (id: string) => {
  switch (id) {
    case "1":
      component.value = PageContent;
      break;
    case "2":
      component.value = PageMap;
      break;
    default:
      component.value = PageEmety;
      break;
  }
  // nextTick(() => {
  //   saveImage();
  // });
};

watch(
  () => route.query.id,
  (newValue) => {
    loadCompontent(newValue as string);
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss"></style>
